<template>
	<view class="">
		<view class="coupon-list-wrapper">
			<view class="coupon-wrapper type1" v-if="type == 1">
				<view class="top">
					<view class="name-and-info">
						<text class="name">{{coupon_info.coupon_title}}</text>
						<text class="info">仅限本人使用，不得转送他人</text>
					</view>
					<text class="type">免费尝鲜</text>
				</view>
				<view class="bottom">
					<text class="date">菜品名称：{{coupon_info.name}}</text>
					<text class="btn" @click="takeCoupon">立即领取</text>
				</view>
			</view>
			<view class="coupon-wrapper type2" v-else-if="type == 3">
				<view class="top">
					<view class="name-and-info">
						<text class="name">{{coupon_info.coupon_title}}</text>
						<text class="info">仅限本人使用，不得转送他人</text>
					</view>
					<text class="type">周体验</text>
				</view>
				<view class="bottom">
					<text class="date">计划名称：{{coupon_info.name}}</text>
					<text class="btn" @click="takeCoupon">立即领取</text>
				</view>
			</view>
			<view class="coupon-wrapper type3" v-else-if="type == 2">
				<view class="top">
					<text class="name">满<text>{{coupon_info.full_money}}</text>元减<text>{{coupon_info.jian_money}}</text>元</text>
					<text class="info">仅限本人使用，不得转送他人</text>
				</view>
				<view class="bottom">
					<text class="date">{{coupon_info.coupon_title}}</text>
					<text class="btn" @click="takeCoupon">立即领取</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				coupon_info: {}
			};
		},
		onLoad(o) {
			this.type = o.type
		},
		mounted() {
			this.getDate()
		},
		methods: {
			getDate: function() {
				this.$api.getInfo({
						type: this.type
					})
					.then(res => {
						console.log(res);
						this.coupon_info = res.data
					})
			},
			takeCoupon: function() {
				this.$api.getCoupons({
						coupon_id: this.coupon_info.coupon_id
					})
					.then(res => {
						this.$db._ShowToast(res.msg, () => {
							this.$db._NavTo('coupon', this.$db.navToMethod[1])
						})
					})
					.catch(err => {
						this.$db._NavTo('index', this.$db.navToMethod[1])
					})
			}
		}
	}
</script>

<style lang="scss">
	.coupon-list-wrapper {
		padding-top: 70rpx;

		.coupon-wrapper {

			&.type1 {
				margin: 0 auto;
				padding: 0 32rpx;
				width: 714rpx;
				height: 219rpx;
				display: flex;
				flex-flow: column;
				background: url(../../static/coupon/lv@3x@2x.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;
				box-sizing: border-box;
				border: 1rpx solid rgba(0, 0, 0, 0);

				.top {
					margin-top: 32rpx;
					display: flex;
					align-items: center;

					.name-and-info {
						display: flex;
						flex-flow: column;

						.name {
							margin-bottom: 8rpx;
							font-size: 32rpx;
							color: rgba(72, 133, 56, 1);
						}

						.info {
							font-size: 22rpx;
							color: #488538;
						}
					}

					.type {
						margin-left: auto;
						font-size: 38rpx;
						font-weight: normal;
						color: #FFFFFF;
					}
				}

				.bottom {
					margin-top: auto;
					margin-bottom: 22rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.date {
						font-size: 26rpx;
						font-weight: normal;
						color: rgba(149, 149, 149, 1);
					}

					.btn {
						margin-right: 5rpx;
						padding: 4rpx 20rpx;
						font-size: 26rpx;
						font-weight: normal;
						border: 2px solid rgba(105, 156, 7, 1);
						border-radius: 26rpx;
						color: #699C07;
					}
				}
			}

			&.type2 {
				margin: 0 auto;
				padding: 0 32rpx;
				width: 714rpx;
				height: 219rpx;
				display: flex;
				flex-flow: column;
				background: url(../../static/coupon/cs@3x@2x.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;
				box-sizing: border-box;
				border: 1rpx solid rgba(0, 0, 0, 0);

				.top {
					margin-top: 32rpx;
					display: flex;
					align-items: center;

					.name-and-info {
						display: flex;
						flex-flow: column;

						.name {
							margin-bottom: 8rpx;
							font-size: 32rpx;
							color: #D49A00;
						}

						.info {
							font-size: 22rpx;
							color: #D49A00;
						}
					}

					.type {
						margin-left: auto;
						font-size: 38rpx;
						font-weight: normal;
						color: #FFFFFF;
					}
				}

				.bottom {
					margin-top: auto;
					margin-bottom: 22rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.date {
						font-size: 26rpx;
						font-weight: normal;
						color: rgba(149, 149, 149, 1);
					}

					.btn {
						margin-right: 5rpx;
						padding: 4rpx 20rpx;
						font-size: 26rpx;
						font-weight: normal;
						border: 2px solid #F2C866;
						border-radius: 26rpx;
						color: #F2C866;
					}
				}
			}

			&.type3 {
				margin: 0 auto;
				padding: 0 32rpx;
				width: 714rpx;
				height: 219rpx;
				display: flex;
				flex-flow: column;
				background: url(../../static/coupon/lan@3x@2x.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;
				box-sizing: border-box;
				border: 1rpx solid rgba(0, 0, 0, 0);

				.top {
					margin: 0 auto;
					margin-top: 14rpx;
					display: flex;
					flex-flow: column;
					align-items: center;

					.name {
						font-size: 32rpx;
						color: #F8F8F8;

						text {
							font-size: 54rpx;
						}
					}

					.info {
						font-size: 22rpx;
						color: #F8F8F8;
					}
				}

				.bottom {
					margin-top: auto;
					margin-bottom: 22rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.date {
						font-size: 26rpx;
						font-weight: normal;
						color: rgba(149, 149, 149, 1);
					}

					.btn {
						margin-right: 5rpx;
						padding: 4rpx 20rpx;
						font-size: 26rpx;
						font-weight: normal;
						border: 2px solid #F2C866;
						border-radius: 26rpx;
						color: #F2C866;
					}
				}
			}

			&+.coupon-wrapper {
				margin-top: 61rpx;
			}


			&.invalid {
				background: url(../../static/coupon/hui@3x@2x.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;

				text {
					color: #F8F8F8;
				}

				.name,
				.info,
				.btn {
					color: #939393 !important;

					text {
						color: #939393 !important;
					}
				}

				.btn {
					border: 2rpx solid #939393 !important;
				}
			}
		}
	}
</style>
